<template>
  <div :class="['todo-item',todo.completed?'completed':'']">
    <input type="checkbox" :checked="todo.completed" @change="handleChange" />
    <label v-if="flag" @dblclick="handleClick">{{ todo.content }}</label>
    <input
      v-else
      v-todo-focus
      type="text"
      :value="todo.content"
      @keyup.enter="headerEnter"
      @keyup.esc="headerEsc"
      @blur="headerEnter"
    />
    <button @click="handleDel"></button>
  </div>
</template>

<script>
export default {
  name: "TodoItem",
  //自定义指令
  directives:{
    "todo-focus":{
      inserted:function(el){
          el.focus()
        }
    }
  },
  props: {
    todo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      flag: true,
    };
  },
  methods: {
    handleChange() {
      this.$emit("toggle", this.todo.id);
    },
    handleClick(){
      this.flag=false
    },
    headerEnter(e) {
      if (this.flag==false) {
        const content = e.target.value;
        this.$emit("change", this.todo.id, content);

        this.flag=true
      }
    },
    headerEsc(){
      this.flag=true
    },
    handleDel(){
      this.$emit("del", this.todo.id);
    }
  },
};
</script>

<style lang="stylus">
@import "~styles/theme.styl";
@import "~styles/mixins.styl";

.todo-item
  display flex
  justify-content: space-between
  padding 2px 5px
  border-bottom: 1px solid rgba(200, 200, 169, 0.5)
  font-size: 20px
  input[type="checkbox"]
    width 40px
    height 40px
    //表单元素美化
    // border: none
    // outline: none
    // appearance: none
    clearDefault()

    //&表示父元素
    &::after
      content: url('~images/unChecked.svg')
    &:checked::after
      content: url('~images/Checked.svg')

  label
    flex: 1
    height 40px
    font-family 'STXinwei'
    color $Floralwhite
    margin-left: 20px
    line-height 40px
    transition: all 0.5s
  button
    width: 40px
    height: 40px
    clearDefault()
    background-color: transparent
    // appearance: none
    // border: none
    // outline: none
    cursor: pointer

  &:hover
    button::after
      content: '×'
      font-size: 30px
      color: $Floralwhite
      text-shadow: 2px 2px 2px rgba(200, 200, 169, 0.5)
  input[type="text"]
    flex: 1
    font-family 'STXinwei'
    color: $Floralwhite
    font-size: 20px

    border: 2px solid rgb(200, 200, 169)
    border-radius: 5px
    outline: none
    // clearDefault()

    margin-left: 20px 
    padding auto
    background-color: transparent
  &.completed
    label
      text-decoration line-through
      color $Floralwhite
      //字体透明度
      opacity: 0.5
      //禁止点击
      pointer-events:none;
      
</style>
